<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>我的文章 - 个人博客</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <link rel="stylesheet" href="style.css" />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
    />
  </head>
  <body id="app">
    <div>
      <header class="navbar">
        <div class="nav-container">
          <div class="logo">我的小窝</div>
          <nav class="nav-links">
            <a href="index.html">自我介绍</a>
            <a href="articles.html" class="active">我的文章</a>
            <a href="movies.html">喜欢的电影</a>
            <a href="space.html">个人空间</a>
          </nav>
        </div>
      </header>

      <main style="padding: 50px; text-align: center">
        <div class="page-header">
          <h1>文章页面</h1>
          <p>记录生活与学习的点滴</p>
        </div>

        <div class="article-container">
          <!-- 使用v-for循环渲染文章列表 -->
          <article
            class="article-card"
            v-for="(article, index) in articles"
            :key="article.id"
            :style="{animationDelay:index * 0.1 + 's'}"
          >
            <!-- 文章封面图 -->
            <div class="article-image">
              <img :src="article.coverImage" :alt="article.title" />
            </div>
            <div class="article-content">
              <h2 class="article-title">{{article.title}}</h2>

              <div class="article-meta">
                <span class="article-date">{{article.date}}</span>
                <span class="article-category">{{article.category}}</span>
              </div>
              <p class="article-excerpt">{{article.excerpt}}</p>
              <a href="#" class="read-more" @click="openArticleDetail(article)"
                >阅读全文</a
              >
            </div>
          </article>
        </div>
      </main>
    </div>
  </body>
  <!-- 文章详情弹窗 -->
  <div v-if="isModalEntering" class="overlay" @click.stop></div>
  <div v-if="isModalEntering" class="popup">
    <!-- 关闭按钮 -->
    <button class="close-btn" @click="closeArticleDetail">
      <i class="fas fa-times"></i>
    </button>
    <!-- 文章详情内容 -->
    <div class="detail-container">
      <!-- 封面 -->
      <div class="detail-cover">
        <img :src="selectedArticle.coverImage" :alt="selectedArticle.title" />
      </div>
      <!-- 元素 -->
      <div class="detail-header">
        <h1 class="detail-title">{{ selectedArticle.title }}</h1>
        <div class="detail-meta">
          <span class="detail-date">{{ selectedArticle.date }}</span>
          <span class="detail-category">{{ selectedArticle.category }}</span>
        </div>
      </div>
      <!-- 文章完整内容 -->
      <div class="detail-content">
        <p v-for="(paragraph, i) in selectedArticle.content" :key="i">
          {{ paragraph }}
        </p>
      </div>
    </div>
  </div>

  <script>
    const app = {
      name: "ArticlesPage",
      data() {
        return {
          // 文章数据（包含完整内容）
          articles: [
            {
              title: "前端入门学习笔记",
              date: "2023-05-15",
              category: "技术",
              excerpt:
                "记录我作为前端小白的学习历程，从HTML、CSS到JavaScript的基础知识总结...",
              coverImage: "https://picsum.photos/id/0/800/500",
              content: [
                "作为一个前端小白，我最近开始了我的前端学习之旅。这篇文章记录了我的一些学习笔记和心得体会。",
                "首先接触的是HTML，它是构建网页的基础。HTML负责定义网页的结构和内容，通过各种标签来组织文本、图片、链接等元素。我学习了常用的标签如div、p、img、a等，以及如何使用它们来创建简单的页面结构。",
                "接下来是CSS，它用于美化网页。通过CSS，我们可以改变文字的颜色、大小，设置背景，调整元素的布局等。我学习了选择器、盒模型、浮动和定位等基本概念，这些知识让我能够开始创建更具视觉吸引力的页面。",
                "JavaScript是前端学习中比较有挑战性的部分，它赋予了网页交互能力。我从变量、数据类型、函数等基础语法开始学起，逐渐掌握了DOM操作、事件处理等技能。虽然一开始觉得很难，但通过不断练习，我慢慢理解了其中的逻辑。",
                "学习前端最重要的是实践，我通过完成一些小项目来巩固所学的知识。每完成一个项目，都会有很大的成就感，这也激励着我继续学习下去。",
              ],
            },
            {
              title: "Vue框架初体验",
              date: "2023-06-22",
              category: "技术",
              excerpt:
                "第一次使用Vue框架开发项目的感受和心得，双向绑定真的很神奇...",
              coverImage: "https://picsum.photos/id/160/800/500",
              content: [
                "在掌握了HTML、CSS和JavaScript基础知识后，我开始学习Vue框架。作为一个流行的前端框架，Vue以其简洁易学的特点受到很多开发者的喜爱。",
                "Vue的核心概念包括响应式数据、组件化、指令等。其中，双向数据绑定给我留下了深刻印象，它让数据和视图保持同步，大大简化了DOM操作的代码。",
                "我通过官方文档和一些在线教程学习Vue，从最简单的Hello World程序开始，逐步构建更复杂的应用。Vue的模板语法非常直观，让我能够快速上手。",
                "组件化开发是Vue的另一个重要特性，它允许我们将页面拆分成独立的、可复用的组件。这种方式不仅提高了代码的复用性，也让项目结构更加清晰，便于维护。",
                "在学习过程中，我也遇到了不少问题，比如组件间通信、生命周期钩子的理解等。通过查阅资料和实践，这些问题都一一得到解决，这个过程也让我对Vue有了更深入的理解。",
              ],
            },
            {
              title: "我的第一个个人项目",
              date: "2023-07-30",
              category: "项目",
              excerpt:
                "分享我开发第一个完整前端项目的过程，遇到的问题和解决方法...",
              coverImage: "https://picsum.photos/id/180/800/500",
              content: [
                "学习前端一段时间后，我决定开发一个个人项目来检验自己的学习成果。我选择了制作一个简单的待办事项应用，这个应用虽然简单，但包含了前端开发的许多核心概念。",
                "首先，我进行了需求分析，确定了应用需要实现的功能：添加待办事项、标记完成状态、删除待办事项、过滤显示等。然后，我设计了简单的页面布局和交互流程。",
                "在开发过程中，我遇到了不少挑战。比如，如何持久化存储待办事项数据，如何实现待办事项的拖拽排序等。通过查阅资料和不断尝试，我最终解决了这些问题。",
                "这个项目让我对前端开发有了更全面的认识，也让我意识到了自己的不足。比如，在代码组织和性能优化方面还有很大的提升空间。",
                "完成这个项目后，我把它部署到了网上，并分享给了我的朋友。收到他们的反馈和鼓励，我感到非常开心。这也激励我继续学习，开发更多更好的项目。",
              ],
            },
            {
              title: "前端性能优化小技巧",
              date: "2023-08-10",
              category: "技术",
              excerpt:
                "总结一些实用的前端性能优化方法，让你的网页加载更快，运行更流畅...",
              coverImage: "https://picsum.photos/id/48/800/500",
              content: [
                "随着网页越来越复杂，性能问题变得越来越重要。一个加载缓慢、响应迟钝的网页会严重影响用户体验。在这篇文章中，我将分享一些前端性能优化的小技巧。",
                "首先是资源加载优化。我们可以通过压缩CSS和JavaScript文件、使用图片懒加载、合理设置缓存策略等方式来减少加载时间。另外，使用CDN分发静态资源也能显著提高加载速度。",
                "其次是渲染性能优化。避免频繁的DOM操作，使用虚拟DOM；减少重绘和重排，合理使用CSS动画；优化JavaScript执行效率，避免长时间运行的脚本阻塞页面渲染。",
                "代码层面的优化也很重要。比如，减少不必要的依赖，使用Tree-shaking移除未使用的代码；合理使用事件委托，减少事件监听器的数量；优化循环和条件判断，提高代码执行效率。",
                "最后，性能优化是一个持续的过程。我们可以使用浏览器的开发者工具来分析性能瓶颈，有针对性地进行优化。同时，要在性能和开发效率之间找到平衡，避免过度优化。",
              ],
            },
          ],
          // 当前选中的文章（用于展示详情）
          selectedArticle: null,
          // 用于控制弹窗动画
          isModalEntering: false,
        };
      },
      methods: {
        // 打开文章详情
        openArticleDetail(article) {
          this.selectedArticle = article;
          // 触发动画
          setTimeout(() => {
            this.isModalEntering = true;
          }, 10);
          // 禁止背景滚动
          document.body.style.overflow = "hidden";
        },

        // 关闭文章详情
        closeArticleDetail() {
          this.isModalEntering = false;
          // 等待动画结束后再隐藏弹窗
          setTimeout(() => {
            this.selectedArticle = null;
            // 恢复背景滚动
            document.body.style.overflow = "";
          }, 300);
        },
      },
    };

    Vue.createApp(app).mount("#app");
  </script>
</html>
